<template>
  <div class="widget-cate">{{ title }}</div>
  <draggable
    tag="ul"
    item-key="element_control"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :list="list"
    :move="handleMoveAdd"
  >
    <template #item="{ element }">
      <li
        v-if="fields.includes(element.element_control)"
        class="form-edit-widget-label"
        :class="{ 'no-put': element.element_control === 'divider' }"
      >
        <a>
          <SvgIcon :name="element.element_control" />
          <span>{{ element.element_name }}</span>
        </a>
      </li>
    </template>
  </draggable>
</template>

<script lang="ts" setup>
  document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
  };
  import { PropType } from 'vue';
  import draggable from 'vuedraggable';
  const props = defineProps({
    title: {
      type: String,
      required: true,
    },
    fields: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
    list: {
      required: true,
    },
    isTables: {
      type: Boolean,
      default: false,
      required: true,
    },
    json: {
      type: Object,
    },
  });
  const handleListInsert = (json: any) => {
    let isTo;
    if (json) {
      if (json.display_area) {
        json.display_area.forEach((element) => {
          if (['processAdvice'].includes(element.element_control)) {
            isTo = false;
          } else {
            if (element.columns) {
              element.columns.forEach((column) => {
                isTo = handleListInsert(column.list);
              });
            }
          }
        });
      }
      if (json.length) {
        json.forEach((element) => {
          console.log(element);

          if (['processAdvice'].includes(element.element_control)) {
            isTo = false;
          }
        });
      } else {
      }
      // if (json.hidden_area) {
      //   json.hidden_area.forEach((element) => {
      //     if (element.element_control == 'processAdvice') {
      //       isTo = false;
      //     }
      //   });
      // }
      // if (json.trash_area) {
      //   json.trash_area.forEach((element) => {
      //     if (element.element_control == 'processAdvice') {
      //       isTo = false;
      //     }
      //   });
      // }
    }
    console.log(isTo);
    return isTo;
  };
  const handleMoveAdd = (event) => {
    if (
      (event.to.className == 'widget-form-display' ||
        event.to.className == 'widget-form-hidden' ||
        event.to.className == 'widget-form-trash') &&
      ['button'].includes(event.draggedContext.element.element_control)
    ) {
      event.draggedContext.element.isShowType = true;
    } else if (
      event.to.className == 'widget-form-button' &&
      ['button'].includes(event.draggedContext.element.element_control)
    ) {
      event.draggedContext.element.isShowType = false;
    }
    if (event.draggedContext.element.element_control == 'processAdvice') {
      return handleListInsert(props.json);
    }
    if (event.to.className == 'widget-form-trash') {
      return false;
    }
    if (
      event.to.className == 'widget-form-button' &&
      !['button'].includes(event.draggedContext.element.element_control)
    ) {
      return false;
    }
    if (props.isTables) {
      if (
        (event.to.className == 'widget-form-display' ||
          event.to.className == 'widget-form-hidden' ||
          event.to.className == 'widget-form-trash') &&
        ['tabs', 'grid'].includes(event.draggedContext.element.element_control)
      ) {
        return false;
      }

      if (
        (event.to.className == 'widget-form-display' ||
          event.to.className == 'widget-form-trash' ||
          event.to.className == 'widget-col-list widget-button-list') &&
        ['foldedPanel'].includes(event.draggedContext.element.element_control)
      ) {
        return false;
      }
      if (
        ['widget-col-list widget-foldedPanel-list'].includes(event.to.className) &&
        ['buttonArea'].includes(event.draggedContext.element.element_control)
      ) {
        return false;
      }
      if (
        ['widget-col-list widget-divLayout-list'].includes(event.to.className) &&
        ['divLayout'].includes(event.draggedContext.element.element_control)
      ) {
        return false;
      }
      if (
        event.to.className == 'widget-col-list widget-button-list' &&
        ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          event.draggedContext.element.element_control,
        )
      ) {
        return false;
      }
    }
    if (!props.isTables) {
      if (
        (event.to.className == 'widget-form-display' ||
          event.to.className == 'widget-form-hidden' ||
          event.to.className == 'widget-form-trash') &&
        ['buttonArea'].includes(event.draggedContext.element.element_control)
      ) {
        return false;
      }
    }
  };
</script>
